<template>
  <div>
    <button @click="modeleOpen=true">弹出模态窗</button>
<!--    teleport 是指传输，to的指向是个element节点，当其内容展示的时候会将内容插至to所指向的地方，大多数会指向body层次（在element的dialog弹窗中有个属性叫appen-to-body，boolen类型的，功能一致）-->
    <teleport to="body">
      <div v-if="modeleOpen" class="modeal">
        <div>父级为body的弹窗</div>
        <button @click="modeleOpen=false">确定</button>
      </div>
    </teleport>
  </div>
</template>
<script>
export default {
  setup(){

  },
  data(){
    return {
      modeleOpen:false
    }
  }
}
</script>
